import React, { Component } from 'react';
import {SingleInput,QiniuMulti} from '../common/Forminput';
import Qiniu from 'react-qiniu';
import {browserHistory,hashHistory,Link} from 'react-router';
import { connect } from 'react-redux';
import { CostUpdate } from '../../Redux/Actions/costAction';
import { QiniuUptokenGet } from '../../Redux/Actions/qiniuAction';
import SweetAlert from 'react-bootstrap-sweetalert';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class Cost extends Component {
  constructor(props){
    super(props)
    this.state = {
      alertstate:"tohide",
      files: [],
      feeId:props.costReducer.cost.data.id,
      orderId:props.costReducer.cost.data.orderId,
      profileId:props.costReducer.cost.data.userId,
      TTProcedureFee:props.costReducer.cost.data.TTProcedureFee,
      TTAgencyFee:props.costReducer.cost.data.TTAgencyFee,
      issuingInterest:props.costReducer.cost.data.issuingInterest,
      customsClearanceFee:props.costReducer.cost.data.customsClearanceFee,
      cccFee:props.costReducer.cost.data.cccFee,
      licenceFee:props.costReducer.cost.data.licenceFee,
      makeInvoiceFee:props.costReducer.cost.data.makeInvoiceFee,
      incidentals:props.costReducer.cost.data.incidentals,
      carPrice:props.costReducer.cost.data.carPrice,
      taxFee:props.costReducer.cost.data.taxFee,
      summary:props.costReducer.cost.data.summary,
      twiceDocumentaryCredit:props.costReducer.cost.data.twiceDocumentaryCredit,
      makeInvoiceMoney:props.costReducer.cost.data.makeInvoiceMoney,
      accountPayable:props.costReducer.cost.data.accountPayable,
      paymentBillUrl:props.costReducer.cost.data.paymentBillUrl
    }
    this.fallbackParent = (name,value)=>{
      this.setState({[name]:value});
    }
    this.getPhotoUrl = (photoUrl) => {
        this.setState({
            paymentBillUrl:photoUrl
        })
    }
    this.handleSubmit = ()=>{
        event.preventDefault(); 
        const token = this.props.authReducer.user.data.token;
        const opt =this.state
        for(let i in opt){
            if(opt[i]==null){
                opt[i] = "";
            }
            if(typeof opt[i] == "object"){
                opt[i] = opt[i].join(",")
            }
        }
        opt.TTProcedureFee = opt.TTProcedureFee*1
        opt.TTAgencyFee = opt.TTAgencyFee*1
        opt.issuingInterest = opt.issuingInterest*1
        opt.customsClearanceFee = opt.customsClearanceFee*1
        opt.cccFee = opt.cccFee*1
        opt.licenceFee = opt.licenceFee*1
        opt.makeInvoiceFee = opt.makeInvoiceFee*1
        opt.incidentals = opt.incidentals*1
        opt.carPrice = opt.carPrice*1
        opt.taxFee = opt.taxFee*1
        opt.summary = opt.summary*1
        opt.twiceDocumentaryCredit = opt.twiceDocumentaryCredit*1
        opt.makeInvoiceMoney = opt.makeInvoiceMoney*1
        opt.accountPayable = opt.accountPayable*1
        
        this.props.dispatch(CostUpdate(token,opt));
        this.setState({
            alertstate:"toshow"
        })
    }
  }

  render() {
    //const cost = this.props.costReducer.cost.data;
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
            <div className="row">
                <ol className="breadcrumb">
                <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                <li>成本计算</li>
                </ol>
            </div>
            <div className="row">
                <div className="col-lg-12">
                <div className="panel panel-default">
                    <div className="panel-heading">
                        成本编辑
                        <Link className="pull-right btn btn-primary" style={{marginTop:"6px"}} to={{pathname:"/main/cost",state:{profileId:this.state.profileId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}}}>详情</Link>
                    </div>
                    <div className="panel-body">
                        <div className="form-horizontal">
                            <SingleInput label="TT开证手续费" name="TTProcedureFee" placeholder="TT开证手续费" value={this.state.TTProcedureFee} backParent={this.fallbackParent}/>
                            <SingleInput label="TT开证代理费" name="TTAgencyFee" placeholder="TT开证代理费" value={this.state.TTAgencyFee} backParent={this.fallbackParent}/>
                            <SingleInput label="开证利息" name="issuingInterest" placeholder="TT开证手续费" value={this.state.issuingInterest} backParent={this.fallbackParent}/>
                            <SingleInput label="通关费" name="customsClearanceFee" placeholder="通关费" value={this.state.customsClearanceFee} backParent={this.fallbackParent}/>
                            <SingleInput label="3C" name="cccFee" placeholder="3C" value={this.state.cccFee} backParent={this.fallbackParent}/>
                            <SingleInput label="许可证" name="licenceFee" placeholder="许可证" value={this.state.licenceFee} backParent={this.fallbackParent}/>
                            <SingleInput label="开票费用" name="makeInvoiceFee" placeholder="开票费用" value={this.state.makeInvoiceFee} backParent={this.fallbackParent}/>
                            <SingleInput label="杂费" name="incidentals" placeholder="杂费" value={this.state.incidentals} backParent={this.fallbackParent}/>
                            <SingleInput label="车价" name="carPrice" placeholder="车价" value={this.state.carPrice} backParent={this.fallbackParent}/>
                            <SingleInput label="税款" name="taxFee" placeholder="税款" value={this.state.taxFee} backParent={this.fallbackParent}/>
                            <SingleInput label="总计" name="summary" placeholder="总计" value={this.state.summary} backParent={this.fallbackParent}/>
                            <SingleInput label="二次押汇" name="twiceDocumentaryCredit" placeholder="二次押汇" value={this.state.twiceDocumentaryCredit} backParent={this.fallbackParent}/>
                            <SingleInput label="开票金额" name="makeInvoiceMoney" placeholder="开票金额" value={this.state.makeInvoiceMoney} backParent={this.fallbackParent}/>
                            <SingleInput label="实际应付单" name="accountPayable" placeholder="实际应付单" value={this.state.accountPayable} backParent={this.fallbackParent}/>
                            {/*<QiniuMulti label="回单照片" info="请上传付款回单照片，最多上传6张。" token={token.token} limitNum="6" callbackParent={this.getPhotoUrl.bind(this)}/>*/}
                            <div className="col-sm-8" style={{textAlign: "center"}}>
                                <button type="button" className="btn btn-primary" style={{marginRight: "15px"}} onClick={this.handleSubmit}>
                                上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div  id="alertwrap" className={this.state.alertstate}>
                    <SweetAlert
                    info
                    confirmBtnText="确定"
                    confirmBtnBsStyle="primary"
                    title="成本信息已提交。"
                    onConfirm={()=>{this.setState({alertstate:"tohide"});history.push({pathname:"/main/cost",state:{profileId:this.state.profileId,orderId:this.state.orderId,backurl:this.props.location.state.backurl}})}}
                    >
                    </SweetAlert>
                </div>
                </div>
            </div>	
        </div>
    )
  }
}

export default connect((state) => {
    const { authReducer,costReducer,qiniuReducer } = state;
    return {
        authReducer,costReducer,qiniuReducer
    }
})(Cost);